import React from 'react'
import styled from 'styled-components'

// The Button from the last section without the interpolations
const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// A new component based on Button, but with some override styles
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

export default ()=>(
  <div>
    <Button>Normal Button</Button>
    <Button as="a" href="/">Link with Button styles</Button>
    <TomatoButton as="a" href="/">Link with Tomato Button styles</TomatoButton>
    <Button as={(props)=>{
      console.log('props:', props);
/*
props: {children: "Custom Button with Normal Button styles", className: "sc-02__Button-sc-1n8znxf-0 iuawrG"}
  children: "Custom Button with Normal Button styles"
  className: "sc-02__Button-sc-1n8znxf-0 iuawrG"
  __proto__: Object
*/
      return <div {...props}>hello</div>
    }}>Custom Button with Normal Button styles</Button>
  </div>
)
